<template>
  <div>
    <!-- <a-button type="primary" @click="visible = true">New Collection</a-button> -->
    <a-modal v-model:visible="visible" title="企业基本信息表" ok-text="返回" :footer="null" :width="1200" :after-close="test">
      <h1 style="text-align: center">企业信息基本表</h1>
      <h2 @click="show(1)">基本信息</h2>
      <ul v-show="show1">
        <li
          >中文名称：<span>{{ allData.assetsName }}</span></li
        ><br />
        <li
          >英文名称：<span>{{ allData.assetsEnglish }}</span></li
        ><br />
        <li
          >数据资产表描述：<span>{{ allData.assetsMsg }}</span></li
        ><br />
        <li style="display: flex; margin-left: 3em; flex-wrap: wrap">
          <span>所属目录：</span>
          <div style="display: flex; flex-wrap: wrap">
            <span v-for="(li, index) in allData.directoryLevel" :key="index" class="catelogValue">{{ li }}</span></div
          >
        </li>
      </ul>
      <h2 @click="show(2)">字段信息</h2>
      <a-table :data-source="dataSource" :columns="columns" :row-key="(record:any)=>{record.standardId}" />
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import type { FormInstance } from 'ant-design-vue';
  // import { querySingleapi } from '../../api/test/asset';
  import { querySingleapi } from '../../api/test/asset';
  interface Values {
    title: string;
    description: string;
    modifier: string;
  }

  export default defineComponent({
    setup() {
      const formRef = ref<FormInstance>();
      const visible = ref(false);
      const formState = reactive<Values>({
        title: '',
        description: '',
        modifier: 'public',
      });
      const dataSource = ref();
      let querycode = 0;
      const allData: any = ref({});

      //组件通信区
      //组件传值限制是否显示
      //@ts-ignore
      const { proxy } = getCurrentInstance();
      proxy.$mybus.on('setdatatable', (xixi: any) => {
        querycode = xixi;
        visible.value = true;
        querySingle();
      });
      //请求
      const querySingle = async () => {
        let a = await querySingleapi(querycode);

        allData.value = a.data;
        dataSource.value = allData.value.standards;
        console.log(dataSource.value);
      };
      //显示不显示
      const show1 = ref(true);
      const show = (number: any) => {
        if (number == 1) {
          show1.value = !show1.value;
        }
      };
      //表格格式和数据
      const columns = ref([
        {
          title: '字段英文名称',
          dataIndex: 'standardEnglish',
          key: 1,
        },
        {
          title: '字段中文名称',
          dataIndex: 'standardName',
          key: 2,
        },
        {
          title: '字段说明',
          dataIndex: 'standardMsg',
          key: 3,
        },
        // {
        //   title: '标准映射',
        //   dataIndex: 'name',
        //   key: 4,
        // },
        {
          title: '数据类型',
          dataIndex: 'standardDataType',
          key: 5,
        },
        {
          title: '数据长度',
          dataIndex: 'standardDataLength',
          key: 6,
        },
        {
          title: '数据精度',
          dataIndex: 'standardDataAccuracy',
          key: 7,
        },
        {
          title: '默认值',
          dataIndex: 'standardDefault',
          key: 8,
        },
        // {
        //   title: '取值范围',
        //   dataIndex: 'name',
        //   key: 9,
        // },
        // {
        //   title: '枚举范围',
        //   dataIndex: 'name',
        //   key: 10,
        // },
      ]);

      const test = () => {
        visible.value = false;
        allData.value = {};
      };

      return {
        allData,
        dataSource,
        columns,
        formState,
        formRef,
        visible,
        show1,
        show,
        test,
      };
    },
  });
</script>
<style>
  .collection-create-form_last-form-item {
    margin-bottom: 0;
  }

  li {
    list-style: none;
  }

  .catelogValue {
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: 5px;
    padding-right: 4em;
    padding-left: 4em;
  }
</style>
